<script setup>
import List from "./list.vue"
import AreaList from "./warehouseArea/areaList.vue"
import locaList from "./warehouseAreaLoca/locaList.vue";

</script>

<template>
  <el-tabs type="border-card" class="warehouse-tabs">
    <el-tab-pane label="仓库设置">
      <list />
    </el-tab-pane>
    
    <el-tab-pane label="库区设置">
      <AreaList />
    </el-tab-pane>

    <el-tab-pane label="库位设置">
      <locaList />
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped>
.warehouse-tabs {
  --el-tabs-header-height: 60px;
}

.warehouse-tabs :deep(.el-tabs__header) {
  margin-bottom: 20px;
}

.warehouse-tabs :deep(.el-tabs__nav) {
  width: 100%;
  display: flex;
}

.warehouse-tabs :deep(.el-tabs__item) {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #606266;
  transition: all 0.3s;
}

.warehouse-tabs :deep(.el-tabs__item:hover) {
  color: #409eff;
}

.warehouse-tabs :deep(.el-tabs__item.is-active) {
  color: #409eff;
  font-weight: 600;
  background-color: #f5f7fa;
}

.warehouse-tabs :deep(.el-tabs__content) {
  min-height: 300px;
  padding: 20px;
}

.warehouse-tabs :deep(.el-tab-pane) {
  font-size: 14px;
  color: #303133;
}
</style>